<template>
    <!-- vue3页面 -->
    <div class="login">
        <div class="login_info">
            <div class="info">
                <img src="../../assets/img/pic/logo/orange.png">
                <p class="login_title">优质甄选·高枕无忧</p>
                <!-- <p>观察表单提交数据：{{ ruleForm }}</p> -->
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" status-icon>
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入账号" clearable />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" round @click="submitForm()">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 定义表单提交数据字段
            ruleForm: {
                username: "",//账号
                password: ""//密码
            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
                ]
            },
            formSize: ""
        }
    },
    methods: {
        submitForm() {
            // this.$refs[formName] ==>form表单对象实例  validate再次校验数据格式
            // this.$refs['ruleFormRef'].validate((res) => {
            this.$refs.ruleFormRef.validate((res) => {
                if (res) {
                    this.$api.reqLogin(this.ruleForm)
                        .then(res => {
                            console.log(res)
                            // 1.存储用户登录信息
                            localStorage.setItem('userInfo', JSON.stringify(res))
                            // 2.提示用户登录成功 
                            this.$message({
                                message: '登录成功！',
                                type: 'success'
                            });
                            // 3.跳转到首页
                            this.$router.push("/")
                        })
                        .catch(err => console.log(err))

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}


</script>

<style scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #FF6040, #FF8A80);
    position: fixed;
    overflow: hidden;
}

.login_info {
    width: 900px;
    height: 650px;
    background: url("../../assets/img/pic/bg/login.png") no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: 100px;
    left: 480px;
}

.info {
    width: 450px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 355px;
    /* border: 1px solid blue; */
    padding: 60px;
    box-sizing: border-box;
}

.info img {
    width: 330px;
    height: 80px;
    margin-top: 60px;
}

.login_title {
    text-align: center;
    font-family: PingFangSC-Light;
    font-size: 20px;
    letter-spacing: 18px;
    line-height: 72px;
    color: #999999;
    margin: 20px 0 80px 0;
}

.el-button {
    width: 100%;
    margin-top: 20px;
}
</style>